<template>
    <div class="article-view">
        <div class="article-list" v-for="item in posts" :key="item.id" :id="item.id">
           <div class="publish-time">
                <span>{{ item.create_time }}</span>
            </div>
           <card>
            <img slot="header" :src="item.src" style="width:100%;display:block;">
            <div slot="content" class="card-padding">
              <router-link :to="{ path: '/article_content', query: {id: item.id}  }" tag="div">
                <h4 class="weui-media-box__title" style="margin-bottom: 8px;">{{ item.title }}</h4>
                <p class="weui-media-box__desc">{{ item.desc }}</p>
              </router-link>
            </div>
          </card>
        </div>
    </div>
</template>



<script>
import { Divider, Card, Panel } from 'vux'
import { mapState } from 'vuex'

export default {
  name: 'Article',
  components: {
    Card,
    Divider,
    Panel
  },
  computed: {
      ...mapState({
          posts: state => state.article.posts
      })
  },
  created(){
      this.$store.dispatch('getArticlelist').then(res => {
          // console.log(res)
          // console.log(this.posts)
      }).catch(err => {
          console.log(err)
      })
  },
  methods: {
    handerCardHeader () {
      alert('card Header')
    }
  },
  data () {
    return {
      
    }
  }
}
</script>

<style scoped lang="less">
@import "~vux/src/styles/1px.less";

.article-view {
  padding: 15px;
  .article-list {
      margin-top: 10px;
  }
  .weui-panel {
    border-radius: 10px;
  }
  /deep/ .weui-panel__bd {
    position: relative;
    overflow: hidden;
    &:before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #E5E5E5;
      color: #E5E5E5;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .card-padding {
    padding: 15px;
    position: relative;
  }
  /deep/ .weui-media-box__title {
    white-space: normal;
  }
  .publish-time {
    width: 100%;
    text-align: center;
    span {
      display: inline-block;
      background: #d2cdcd;
      color: #fff;
      border-radius: 2px;
      font-size: 12px;
      padding: 0 3px;
    }
  }
}
</style>